<!DOCTYPE html>
<html class="no-js css-menubar" lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
  <meta name="description" content="bootstrap admin template">
  <meta name="author" content="">

  <title>Tooltip &amp; Popover | Remark Admin Template</title>

  <link rel="apple-touch-icon" href="../assets/images/apple-touch-icon.png">
  <link rel="shortcut icon" href="../assets/images/favicon.ico">

  <!-- Stylesheets -->
  <link rel="stylesheet" href="../../global/css/bootstrap.min.css?v2.2.0">
  <link rel="stylesheet" href="../../global/css/bootstrap-extend.min.css?v2.2.0">
  <link rel="stylesheet" href="../assets/css/site.min.css?v2.2.0">

  <!-- Skin tools (demo site only) -->
  <link rel="stylesheet" href="../../global/css/skintools.min.css?v2.2.0">
  <script src="../assets/js/sections/skintools.min.js"></script>

  <!-- Plugins -->
  <link rel="stylesheet" href="../../global/vendor/animsition/animsition.min.css?v2.2.0">
  <link rel="stylesheet" href="../../global/vendor/asscrollable/asScrollable.min.css?v2.2.0">
  <link rel="stylesheet" href="../../global/vendor/switchery/switchery.min.css?v2.2.0">
  <link rel="stylesheet" href="../../global/vendor/intro-js/introjs.min.css?v2.2.0">
  <link rel="stylesheet" href="../../global/vendor/slidepanel/slidePanel.min.css?v2.2.0">
  <link rel="stylesheet" href="../../global/vendor/flag-icon-css/flag-icon.min.css?v2.2.0">

  <!-- Plugins For This Page -->
  <link rel="stylesheet" href="../../global/vendor/webui-popover/webui-popover.min.css?v2.2.0">
  <link rel="stylesheet" href="../../global/vendor/toolbar/toolbar.min.css?v2.2.0">

  <!-- Fonts -->
  <link rel="stylesheet" href="../../global/fonts/web-icons/web-icons.min.css?v2.2.0">
  <link rel="stylesheet" href="../../global/fonts/brand-icons/brand-icons.min.css?v2.2.0">
  <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:300,400,500,300italic'>


  <!--[if lt IE 9]>
    <script src="../../global/vendor/html5shiv/html5shiv.min.js"></script>
    <![endif]-->

  <!--[if lt IE 10]>
    <script src="../../global/vendor/media-match/media.match.min.js"></script>
    <script src="../../global/vendor/respond/respond.min.js"></script>
    <![endif]-->

  <!-- Scripts -->
  <script src="../../global/vendor/modernizr/modernizr.min.js"></script>
  <script src="../../global/vendor/breakpoints/breakpoints.min.js"></script>
  <script>
    Breakpoints();
  </script>
</head>
<body>
  <!--[if lt IE 8]>
        <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

  <nav class="site-navbar navbar navbar-default navbar-fixed-top navbar-mega" role="navigation">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle hamburger hamburger-close navbar-toggle-left hided"
      data-toggle="menubar">
        <span class="sr-only">Toggle navigation</span>
        <span class="hamburger-bar"></span>
      </button>
      <button type="button" class="navbar-toggle collapsed" data-target="#site-navbar-collapse"
      data-toggle="collapse">
        <i class="icon wb-more-horizontal" aria-hidden="true"></i>
      </button>
      <div class="navbar-brand navbar-brand-center site-gridmenu-toggle" data-toggle="gridmenu">
        <img class="navbar-brand-logo" src="../assets/images/logo.png" title="Remark">
        <span class="navbar-brand-text hidden-xs"> Remark</span>
      </div>
      <button type="button" class="navbar-toggle collapsed" data-target="#site-navbar-search"
      data-toggle="collapse">
        <span class="sr-only">Toggle Search</span>
        <i class="icon wb-search" aria-hidden="true"></i>
      </button>
    </div>

    <div class="navbar-container container-fluid">
      <!-- Navbar Collapse -->
      <div class="collapse navbar-collapse navbar-collapse-toolbar" id="site-navbar-collapse">
        <!-- Navbar Toolbar -->
        <ul class="nav navbar-toolbar">
          <li class="hidden-float" id="toggleMenubar">
            <a data-toggle="menubar" href="#" role="button">
              <i class="icon hamburger hamburger-arrow-left">
                  <span class="sr-only">Toggle menubar</span>
                  <span class="hamburger-bar"></span>
                </i>
            </a>
          </li>
          <li class="hidden-xs" id="toggleFullscreen">
            <a class="icon icon-fullscreen" data-toggle="fullscreen" href="#" role="button">
              <span class="sr-only">Toggle fullscreen</span>
            </a>
          </li>
          <li class="hidden-float">
            <a class="icon wb-search" data-toggle="collapse" href="#" data-target="#site-navbar-search"
            role="button">
              <span class="sr-only">Toggle Search</span>
            </a>
          </li>
          <li class="dropdown dropdown-fw dropdown-mega">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"
            data-animation="fade" role="button">Mega <i class="icon wb-chevron-down-mini" aria-hidden="true"></i></a>
            <ul class="dropdown-menu" role="menu">
              <li role="presentation">
                <div class="mega-content">
                  <div class="row">
                    <div class="col-sm-4">
                      <h5>UI Kit</h5>
                      <ul class="blocks-2">
                        <li class="mega-menu margin-0">
                          <ul class="list-icons">
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="../advanced/animation.html">Animation</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="buttons.html">Buttons</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="colors.html">Colors</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="dropdowns.html">Dropdowns</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="icons.html">Icons</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="../advanced/lightbox.html">Lightbox</a>
                            </li>
                          </ul>
                        </li>
                        <li class="mega-menu margin-0">
                          <ul class="list-icons">
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="modals.html">Modals</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="panel-structure.html">Panels</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="../structure/overlay.html">Overlay</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="tooltip-popover.html ">Tooltips</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="../advanced/scrollable.html">Scrollable</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="typography.html">Typography</a>
                            </li>
                          </ul>
                        </li>
                      </ul>
                    </div>
                    <div class="col-sm-4">
                      <h5>Media
                        <span class="badge badge-success">4</span>
                      </h5>
                      <ul class="blocks-3">
                        <li>
                          <a class="thumbnail margin-0" href="javascript:void(0)">
                            <img class="width-full" src="../../global/photos/view-1-150x100.jpg" alt="..."
                            />
                          </a>
                        </li>
                        <li>
                          <a class="thumbnail margin-0" href="javascript:void(0)">
                            <img class="width-full" src="../../global/photos/view-2-150x100.jpg" alt="..."
                            />
                          </a>
                        </li>
                        <li>
                          <a class="thumbnail margin-0" href="javascript:void(0)">
                            <img class="width-full" src="../../global/photos/view-3-150x100.jpg" alt="..."
                            />
                          </a>
                        </li>
                        <li>
                          <a class="thumbnail margin-0" href="javascript:void(0)">
                            <img class="width-full" src="../../global/photos/view-4-150x100.jpg" alt="..."
                            />
                          </a>
                        </li>
                        <li>
                          <a class="thumbnail margin-0" href="javascript:void(0)">
                            <img class="width-full" src="../../global/photos/view-5-150x100.jpg" alt="..."
                            />
                          </a>
                        </li>
                        <li>
                          <a class="thumbnail margin-0" href="javascript:void(0)">
                            <img class="width-full" src="../../global/photos/view-6-150x100.jpg" alt="..."
                            />
                          </a>
                        </li>
                      </ul>
                    </div>
                    <div class="col-sm-4">
                      <h5 class="margin-bottom-0">Accordion</h5>
                      <!-- Accordion -->
                      <div class="panel-group panel-group-simple" id="siteMegaAccordion" aria-multiselectable="true"
                      role="tablist">
                        <div class="panel">
                          <div class="panel-heading" id="siteMegaAccordionHeadingOne" role="tab">
                            <a class="panel-title" data-toggle="collapse" href="#siteMegaCollapseOne" data-parent="#siteMegaAccordion"
                            aria-expanded="false" aria-controls="siteMegaCollapseOne">
                                Collapsible Group Item #1
                              </a>
                          </div>
                          <div class="panel-collapse collapse" id="siteMegaCollapseOne" aria-labelledby="siteMegaAccordionHeadingOne"
                          role="tabpanel">
                            <div class="panel-body">
                              De moveat laudatur vestra parum doloribus labitur sentire partes, eripuit praesenti
                              congressus ostendit alienae, voluptati ornateque
                              accusamus clamat reperietur convicia albucius.
                            </div>
                          </div>
                        </div>
                        <div class="panel">
                          <div class="panel-heading" id="siteMegaAccordionHeadingTwo" role="tab">
                            <a class="panel-title collapsed" data-toggle="collapse" href="#siteMegaCollapseTwo"
                            data-parent="#siteMegaAccordion" aria-expanded="false"
                            aria-controls="siteMegaCollapseTwo">
                                Collapsible Group Item #2
                              </a>
                          </div>
                          <div class="panel-collapse collapse" id="siteMegaCollapseTwo" aria-labelledby="siteMegaAccordionHeadingTwo"
                          role="tabpanel">
                            <div class="panel-body">
                              Praestabiliorem. Pellat excruciant legantur ullum leniter vacare foris voluptate
                              loco ignavi, credo videretur multoque choro fatemur
                              mortis animus adoptionem, bello statuat expediunt
                              naturales.
                            </div>
                          </div>
                        </div>

                        <div class="panel">
                          <div class="panel-heading" id="siteMegaAccordionHeadingThree" role="tab">
                            <a class="panel-title collapsed" data-toggle="collapse" href="#siteMegaCollapseThree"
                            data-parent="#siteMegaAccordion" aria-expanded="false"
                            aria-controls="siteMegaCollapseThree">
                                Collapsible Group Item #3
                              </a>
                          </div>
                          <div class="panel-collapse collapse" id="siteMegaCollapseThree" aria-labelledby="siteMegaAccordionHeadingThree"
                          role="tabpanel">
                            <div class="panel-body">
                              Horum, antiquitate perciperet d conspectum locus obruamus animumque perspici probabis
                              suscipere. Desiderat magnum, contenta poena desiderant
                              concederetur menandri damna disputandum corporum.
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End Accordion -->
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </li>
        </ul>
        <!-- End Navbar Toolbar -->

        <!-- Navbar Toolbar Right -->
        <ul class="nav navbar-toolbar navbar-right navbar-toolbar-right">
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)" data-animation="scale-up"
            aria-expanded="false" role="button">
              <span class="flag-icon flag-icon-us"></span>
            </a>
            <ul class="dropdown-menu" role="menu">
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem">
                  <span class="flag-icon flag-icon-gb"></span> English</a>
              </li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem">
                  <span class="flag-icon flag-icon-fr"></span> French</a>
              </li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem">
                  <span class="flag-icon flag-icon-cn"></span> Chinese</a>
              </li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem">
                  <span class="flag-icon flag-icon-de"></span> German</a>
              </li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem">
                  <span class="flag-icon flag-icon-nl"></span> Dutch</a>
              </li>
            </ul>
          </li>
          <li class="dropdown">
            <a class="navbar-avatar dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"
            data-animation="scale-up" role="button">
              <span class="avatar avatar-online">
                <img src="../../global/portraits/5.jpg" alt="...">
                <i></i>
              </span>
            </a>
            <ul class="dropdown-menu" role="menu">
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem"><i class="icon wb-user" aria-hidden="true"></i> Profile</a>
              </li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem"><i class="icon wb-payment" aria-hidden="true"></i> Billing</a>
              </li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem"><i class="icon wb-settings" aria-hidden="true"></i> Settings</a>
              </li>
              <li class="divider" role="presentation"></li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem"><i class="icon wb-power" aria-hidden="true"></i> Logout</a>
              </li>
            </ul>
          </li>
          <li class="dropdown">
            <a data-toggle="dropdown" href="javascript:void(0)" title="Notifications" aria-expanded="false"
            data-animation="scale-up" role="button">
              <i class="icon wb-bell" aria-hidden="true"></i>
              <span class="badge badge-danger up">5</span>
            </a>
            <ul class="dropdown-menu dropdown-menu-right dropdown-menu-media" role="menu">
              <li class="dropdown-menu-header" role="presentation">
                <h5>NOTIFICATIONS</h5>
                <span class="label label-round label-danger">New 5</span>
              </li>

              <li class="list-group" role="presentation">
                <div data-role="container">
                  <div data-role="content">
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <i class="icon wb-order bg-red-600 white icon-circle" aria-hidden="true"></i>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">A new order has been placed</h6>
                          <time class="media-meta" datetime="2016-06-12T20:50:48+08:00">5 hours ago</time>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <i class="icon wb-user bg-green-600 white icon-circle" aria-hidden="true"></i>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Completed the task</h6>
                          <time class="media-meta" datetime="2016-06-11T18:29:20+08:00">2 days ago</time>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <i class="icon wb-settings bg-red-600 white icon-circle" aria-hidden="true"></i>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Settings updated</h6>
                          <time class="media-meta" datetime="2016-06-11T14:05:00+08:00">2 days ago</time>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <i class="icon wb-calendar bg-blue-600 white icon-circle" aria-hidden="true"></i>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Event started</h6>
                          <time class="media-meta" datetime="2016-06-10T13:50:18+08:00">3 days ago</time>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <i class="icon wb-chat bg-orange-600 white icon-circle" aria-hidden="true"></i>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Message received</h6>
                          <time class="media-meta" datetime="2016-06-10T12:34:48+08:00">3 days ago</time>
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
              <li class="dropdown-menu-footer" role="presentation">
                <a class="dropdown-menu-footer-btn" href="javascript:void(0)" role="button">
                  <i class="icon wb-settings" aria-hidden="true"></i>
                </a>
                <a href="javascript:void(0)" role="menuitem">
                    All notifications
                  </a>
              </li>
            </ul>
          </li>
          <li class="dropdown">
            <a data-toggle="dropdown" href="javascript:void(0)" title="Messages" aria-expanded="false"
            data-animation="scale-up" role="button">
              <i class="icon wb-envelope" aria-hidden="true"></i>
              <span class="badge badge-info up">3</span>
            </a>
            <ul class="dropdown-menu dropdown-menu-right dropdown-menu-media" role="menu">
              <li class="dropdown-menu-header" role="presentation">
                <h5>MESSAGES</h5>
                <span class="label label-round label-info">New 3</span>
              </li>

              <li class="list-group" role="presentation">
                <div data-role="container">
                  <div data-role="content">
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <span class="avatar avatar-sm avatar-online">
                            <img src="../../global/portraits/2.jpg" alt="..." />
                            <i></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Mary Adams</h6>
                          <div class="media-meta">
                            <time datetime="2016-06-17T20:22:05+08:00">30 minutes ago</time>
                          </div>
                          <div class="media-detail">Anyways, i would like just do it</div>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <span class="avatar avatar-sm avatar-off">
                            <img src="../../global/portraits/3.jpg" alt="..." />
                            <i></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Caleb Richards</h6>
                          <div class="media-meta">
                            <time datetime="2016-06-17T12:30:30+08:00">12 hours ago</time>
                          </div>
                          <div class="media-detail">I checheck the document. But there seems</div>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <span class="avatar avatar-sm avatar-busy">
                            <img src="../../global/portraits/4.jpg" alt="..." />
                            <i></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">June Lane</h6>
                          <div class="media-meta">
                            <time datetime="2016-06-16T18:38:40+08:00">2 days ago</time>
                          </div>
                          <div class="media-detail">Lorem ipsum Id consectetur et minim</div>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <span class="avatar avatar-sm avatar-away">
                            <img src="../../global/portraits/5.jpg" alt="..." />
                            <i></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Edward Fletcher</h6>
                          <div class="media-meta">
                            <time datetime="2016-06-15T20:34:48+08:00">3 days ago</time>
                          </div>
                          <div class="media-detail">Dolor et irure cupidatat commodo nostrud nostrud.</div>
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
              <li class="dropdown-menu-footer" role="presentation">
                <a class="dropdown-menu-footer-btn" href="javascript:void(0)" role="button">
                  <i class="icon wb-settings" aria-hidden="true"></i>
                </a>
                <a href="javascript:void(0)" role="menuitem">
                    See all messages
                  </a>
              </li>
            </ul>
          </li>
          <li id="toggleChat">
            <a data-toggle="site-sidebar" href="javascript:void(0)" title="Chat" data-url="../site-sidebar.tpl">
              <i class="icon wb-chat" aria-hidden="true"></i>
            </a>
          </li>
        </ul>
        <!-- End Navbar Toolbar Right -->
      </div>
      <!-- End Navbar Collapse -->

      <!-- Site Navbar Seach -->
      <div class="collapse navbar-search-overlap" id="site-navbar-search">
        <form role="search">
          <div class="form-group">
            <div class="input-search">
              <i class="input-search-icon wb-search" aria-hidden="true"></i>
              <input type="text" class="form-control" name="site-search" placeholder="Search...">
              <button type="button" class="input-search-close icon wb-close" data-target="#site-navbar-search"
              data-toggle="collapse" aria-label="Close"></button>
            </div>
          </div>
        </form>
      </div>
      <!-- End Site Navbar Seach -->
    </div>
  </nav>
  <div class="site-menubar">
    <div class="site-menubar-body">
      <div>
        <div>
          <ul class="site-menu">
            <li class="site-menu-category">General</li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-dashboard" aria-hidden="true"></i>
                <span class="site-menu-title">Dashboard</span>
                <div class="site-menu-badge">
                  <span class="badge badge-success">3</span>
                </div>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../index.html">
                    <span class="site-menu-title">Dashboard v1</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../dashboard/v2.html">
                    <span class="site-menu-title">Dashboard v2</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../dashboard/ecommerce.html">
                    <span class="site-menu-title">Ecommerce</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../dashboard/analytics.html">
                    <span class="site-menu-title">Analytics</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../dashboard/team.html">
                    <span class="site-menu-title">Team</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-layout" aria-hidden="true"></i>
                <span class="site-menu-title">Layouts</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/menu-collapsed.html">
                    <span class="site-menu-title">Menu Collapsed</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/menu-collapsed-alt.html">
                    <span class="site-menu-title">Menu Collapsed Alt</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/menu-expended.html">
                    <span class="site-menu-title">Menu Expended</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/grids.html">
                    <span class="site-menu-title">Grid Scaffolding</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/layout-grid.html">
                    <span class="site-menu-title">Layout Grid</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/headers.html">
                    <span class="site-menu-title">Different Headers</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/panel-transition.html">
                    <span class="site-menu-title">Panel Transition</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/boxed.html">
                    <span class="site-menu-title">Boxed Layout</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/two-columns.html">
                    <span class="site-menu-title">Two Columns</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/menubar-flipped.html">
                    <span class="site-menu-title">Menubar Flipped</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/menubar-native-scrolling.html">
                    <span class="site-menu-title">Menubar Native Scrolling</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/bordered-header.html">
                    <span class="site-menu-title">Bordered Header</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/page-aside-fixed.html">
                    <span class="site-menu-title">Page Aside Fixed</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-file" aria-hidden="true"></i>
                <span class="site-menu-title">Pages</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item has-sub">
                  <a href="javascript:void(0)">
                    <span class="site-menu-title">Errors</span>
                    <span class="site-menu-arrow"></span>
                  </a>
                  <ul class="site-menu-sub">
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../pages/error-400.html">
                        <span class="site-menu-title">400</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../pages/error-403.html">
                        <span class="site-menu-title">403</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../pages/error-404.html">
                        <span class="site-menu-title">404</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../pages/error-500.html">
                        <span class="site-menu-title">500</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../pages/error-503.html">
                        <span class="site-menu-title">503</span>
                      </a>
                    </li>
                  </ul>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/faq.html">
                    <span class="site-menu-title">FAQ</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/gallery.html">
                    <span class="site-menu-title">Gallery</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/gallery-grid.html">
                    <span class="site-menu-title">Gallery Grid</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/search-result.html">
                    <span class="site-menu-title">Search Result</span>
                  </a>
                </li>
                <li class="site-menu-item has-sub">
                  <a href="javascript:void(0)">
                    <span class="site-menu-title">Maps</span>
                    <span class="site-menu-arrow"></span>
                  </a>
                  <ul class="site-menu-sub">
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../pages/map-google.html">
                        <span class="site-menu-title">Google Maps</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../pages/map-vector.html">
                        <span class="site-menu-title">Vector Maps</span>
                      </a>
                    </li>
                  </ul>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/maintenance.html">
                    <span class="site-menu-title">Maintenance</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/forgot-password.html">
                    <span class="site-menu-title">Forgot Password</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/lockscreen.html">
                    <span class="site-menu-title">Lockscreen</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/login.html">
                    <span class="site-menu-title">Login</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/register.html">
                    <span class="site-menu-title">Register</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/login-v2.html">
                    <span class="site-menu-title">Login V2</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/register-v2.html">
                    <span class="site-menu-title">Register V2</span>
                    <div class="site-menu-label">
                      <span class="label label-info label-round">new</span>
                    </div>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/login-v3.html">
                    <span class="site-menu-title">Login V3</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/register-v3.html">
                    <span class="site-menu-title">Register V3</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/user.html">
                    <span class="site-menu-title">User List</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/invoice.html">
                    <span class="site-menu-title">Invoice</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/blank.html">
                    <span class="site-menu-title">Blank Page</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/email.html">
                    <span class="site-menu-title">Email</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/code-editor.html">
                    <span class="site-menu-title">Code Editor</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/profile.html">
                    <span class="site-menu-title">Profile</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/site-map.html">
                    <span class="site-menu-title">Sitemap</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-category">Elements</li>
            <li class="site-menu-item has-sub active open">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-bookmark" aria-hidden="true"></i>
                <span class="site-menu-title">Basic UI</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item has-sub">
                  <a href="javascript:void(0)">
                    <span class="site-menu-title">Panel</span>
                    <span class="site-menu-arrow"></span>
                  </a>
                  <ul class="site-menu-sub">
                    <li class="site-menu-item">
                      <a class="animsition-link" href="panel-structure.html">
                        <span class="site-menu-title">Panel Structure</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="panel-actions.html">
                        <span class="site-menu-title">Panel Actions</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="panel-portlets.html">
                        <span class="site-menu-title">Panel Portlets</span>
                      </a>
                    </li>
                  </ul>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="buttons.html">
                    <span class="site-menu-title">Buttons</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="dropdowns.html">
                    <span class="site-menu-title">Dropdowns</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="icons.html">
                    <span class="site-menu-title">Icons</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="list.html">
                    <span class="site-menu-title">List</span>
                  </a>
                </li>
                <li class="site-menu-item active">
                  <a class="animsition-link" href="tooltip-popover.html">
                    <span class="site-menu-title">Tooltip &amp; Popover</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="modals.html">
                    <span class="site-menu-title">Modals</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="tabs-accordions.html">
                    <span class="site-menu-title">Tabs &amp; Accordions</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="images.html">
                    <span class="site-menu-title">Images</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="badges-labels.html">
                    <span class="site-menu-title">Badges &amp; Labels</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="progress-bars.html">
                    <span class="site-menu-title">Progress Bars</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="carousel.html">
                    <span class="site-menu-title">Carousel</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="typography.html">
                    <span class="site-menu-title">Typography</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="colors.html">
                    <span class="site-menu-title">Colors</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="utilities.html">
                    <span class="site-menu-title">Utilties</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-hammer" aria-hidden="true"></i>
                <span class="site-menu-title">Advanced UI</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item hidden-xs site-tour-trigger">
                  <a href="javascript:void(0)">
                    <span class="site-menu-title">Tour</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/animation.html">
                    <span class="site-menu-title">Animation</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/highlight.html">
                    <span class="site-menu-title">Highlight</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/lightbox.html">
                    <span class="site-menu-title">Lightbox</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/scrollable.html">
                    <span class="site-menu-title">Scrollable</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/rating.html">
                    <span class="site-menu-title">Rating</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/context-menu.html">
                    <span class="site-menu-title">Context Menu</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/alertify.html">
                    <span class="site-menu-title">Alertify</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/masonry.html">
                    <span class="site-menu-title">Masonry</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/treeview.html">
                    <span class="site-menu-title">Treeview</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/toastr.html">
                    <span class="site-menu-title">Toastr</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/maps-vector.html">
                    <span class="site-menu-title">Vector Maps</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/maps-google.html">
                    <span class="site-menu-title">Google Maps</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/sortable-nestable.html">
                    <span class="site-menu-title">Sortable &amp; Nestable</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/bootbox-sweetalert.html">
                    <span class="site-menu-title">Bootbox &amp; Sweetalert</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-plugin" aria-hidden="true"></i>
                <span class="site-menu-title">Structure</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/alerts.html">
                    <span class="site-menu-title">Alerts</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/ribbon.html">
                    <span class="site-menu-title">Ribbon</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/pricing-tables.html">
                    <span class="site-menu-title">Pricing Tables</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/overlay.html">
                    <span class="site-menu-title">Overlay</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/cover.html">
                    <span class="site-menu-title">Cover</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/timeline-simple.html">
                    <span class="site-menu-title">Simple Timeline</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/timeline.html">
                    <span class="site-menu-title">Timeline</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/step.html">
                    <span class="site-menu-title">Step</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/comments.html">
                    <span class="site-menu-title">Comments</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/media.html">
                    <span class="site-menu-title">Media</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/chat.html">
                    <span class="site-menu-title">Chat</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/testimonials.html">
                    <span class="site-menu-title">Testimonials</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/nav.html">
                    <span class="site-menu-title">Nav</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/navbars.html">
                    <span class="site-menu-title">Navbars</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/blockquotes.html">
                    <span class="site-menu-title">Blockquotes</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/pagination.html">
                    <span class="site-menu-title">Pagination</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/breadcrumbs.html">
                    <span class="site-menu-title">Breadcrumbs</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-extension" aria-hidden="true"></i>
                <span class="site-menu-title">Widgets</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../widgets/statistics.html">
                    <span class="site-menu-title">Statistics Widgets</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../widgets/data.html">
                    <span class="site-menu-title">Data Widgets</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../widgets/blog.html">
                    <span class="site-menu-title">Blog Widgets</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../widgets/chart.html">
                    <span class="site-menu-title">Chart Widgets</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../widgets/social.html">
                    <span class="site-menu-title">Social Widgets</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../widgets/weather.html">
                    <span class="site-menu-title">Weather Widgets</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-library" aria-hidden="true"></i>
                <span class="site-menu-title">Forms</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/general.html">
                    <span class="site-menu-title">General Elements</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/material.html">
                    <span class="site-menu-title">Material Elements</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/advanced.html">
                    <span class="site-menu-title">Advanced Elements</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/layouts.html">
                    <span class="site-menu-title">Form Layouts</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/wizard.html">
                    <span class="site-menu-title">Form Wizard</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/validation.html">
                    <span class="site-menu-title">Form Validation</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/masks.html">
                    <span class="site-menu-title">Form Masks</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/editable.html">
                    <span class="site-menu-title">Form Editable</span>
                  </a>
                </li>
                <li class="site-menu-item has-sub">
                  <a href="javascript:void(0)">
                    <span class="site-menu-title">Editors</span>
                    <span class="site-menu-arrow"></span>
                  </a>
                  <ul class="site-menu-sub">
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../forms/editor-summernote.html">
                        <span class="site-menu-title">Summernote</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../forms/editor-markdown.html">
                        <span class="site-menu-title">Markdown</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../forms/editor-ace.html">
                        <span class="site-menu-title">Ace Editor</span>
                      </a>
                    </li>
                  </ul>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/image-cropping.html">
                    <span class="site-menu-title">Image Cropping</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/file-uploads.html">
                    <span class="site-menu-title">File Uploads</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-table" aria-hidden="true"></i>
                <span class="site-menu-title">Tables</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/basic.html">
                    <span class="site-menu-title">Basic Tables</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/bootstrap.html">
                    <span class="site-menu-title">Bootstrap Tables</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/floatthead.html">
                    <span class="site-menu-title">floatThead</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/responsive.html">
                    <span class="site-menu-title">Responsive Tables</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/editable.html">
                    <span class="site-menu-title">Editable Tables</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/jsgrid.html">
                    <span class="site-menu-title">jsGrid</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/footable.html">
                    <span class="site-menu-title">FooTable</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/datatable.html">
                    <span class="site-menu-title">DataTables</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-pie-chart" aria-hidden="true"></i>
                <span class="site-menu-title">Chart</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/chartjs.html">
                    <span class="site-menu-title">Chart.js</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/gauges.html">
                    <span class="site-menu-title">Gauges</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/flot.html">
                    <span class="site-menu-title">Flot</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/peity.html">
                    <span class="site-menu-title">Peity</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/sparkline.html">
                    <span class="site-menu-title">Sparkline</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/morris.html">
                    <span class="site-menu-title">Morris</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/chartist.html">
                    <span class="site-menu-title">Chartist.js</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/rickshaw.html">
                    <span class="site-menu-title">Rickshaw</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/pie-progress.html">
                    <span class="site-menu-title">Pie Progress</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/c3.html">
                    <span class="site-menu-title">C3</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-category">Apps</li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-grid-4" aria-hidden="true"></i>
                <span class="site-menu-title">Apps</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/contacts/contacts.html">
                    <span class="site-menu-title">Contacts</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/calendar/calendar.html">
                    <span class="site-menu-title">Calendar</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/notebook/notebook.html">
                    <span class="site-menu-title">Notebook</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/taskboard/taskboard.html">
                    <span class="site-menu-title">Taskboard</span>
                  </a>
                </li>
                <li class="site-menu-item has-sub">
                  <a href="javascript:void(0)">
                    <span class="site-menu-title">Documents</span>
                    <span class="site-menu-arrow"></span>
                  </a>
                  <ul class="site-menu-sub">
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../apps/documents/articles.html">
                        <span class="site-menu-title">Articles</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../apps/documents/categories.html">
                        <span class="site-menu-title">Categories</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../apps/documents/article.html">
                        <span class="site-menu-title">Article</span>
                      </a>
                    </li>
                  </ul>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/forum/forum.html">
                    <span class="site-menu-title">Forum</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/message/message.html">
                    <span class="site-menu-title">Message</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/projects/projects.html">
                    <span class="site-menu-title">Projects</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/mailbox/mailbox.html">
                    <span class="site-menu-title">Mailbox</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/media/overview.html">
                    <span class="site-menu-title">Media</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/work/work.html">
                    <span class="site-menu-title">Work</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/location/location.html">
                    <span class="site-menu-title">Location</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-category">Angular UI</li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../angular/index.html">
                <i class="site-menu-icon bd-angular" aria-hidden="true"></i>
                <span class="site-menu-title">Angular UI</span>
                <div class="site-menu-label">
                  <span class="label label-danger label-round">new</span>
                </div>
              </a>
            </li>
          </ul>

          <div class="site-menubar-section">
            <h5>
              Milestone
              <span class="pull-right">30%</span>
            </h5>
            <div class="progress progress-xs">
              <div class="progress-bar active" style="width: 30%;" role="progressbar"></div>
            </div>
            <h5>
              Release
              <span class="pull-right">60%</span>
            </h5>
            <div class="progress progress-xs">
              <div class="progress-bar progress-bar-warning" style="width: 60%;" role="progressbar"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="site-menubar-footer">
      <a href="javascript: void(0);" class="fold-show" data-placement="top" data-toggle="tooltip"
      data-original-title="Settings">
        <span class="icon wb-settings" aria-hidden="true"></span>
      </a>
      <a href="javascript: void(0);" data-placement="top" data-toggle="tooltip" data-original-title="Lock">
        <span class="icon wb-eye-close" aria-hidden="true"></span>
      </a>
      <a href="javascript: void(0);" data-placement="top" data-toggle="tooltip" data-original-title="Logout">
        <span class="icon wb-power" aria-hidden="true"></span>
      </a>
    </div>
  </div>
  <div class="site-gridmenu">
    <div>
      <div>
        <ul>
          <li>
            <a href="../apps/mailbox/mailbox.html">
              <i class="icon wb-envelope"></i>
              <span>Mailbox</span>
            </a>
          </li>
          <li>
            <a href="../apps/calendar/calendar.html">
              <i class="icon wb-calendar"></i>
              <span>Calendar</span>
            </a>
          </li>
          <li>
            <a href="../apps/contacts/contacts.html">
              <i class="icon wb-user"></i>
              <span>Contacts</span>
            </a>
          </li>
          <li>
            <a href="../apps/media/overview.html">
              <i class="icon wb-camera"></i>
              <span>Media</span>
            </a>
          </li>
          <li>
            <a href="../apps/documents/categories.html">
              <i class="icon wb-order"></i>
              <span>Documents</span>
            </a>
          </li>
          <li>
            <a href="../apps/projects/projects.html">
              <i class="icon wb-image"></i>
              <span>Project</span>
            </a>
          </li>
          <li>
            <a href="../apps/forum/forum.html">
              <i class="icon wb-chat-group"></i>
              <span>Forum</span>
            </a>
          </li>
          <li>
            <a href="../index.html">
              <i class="icon wb-dashboard"></i>
              <span>Dashboard</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>


  <!-- Page -->
  <div class="page animsition">
    <div class="page-header">
      <ol class="breadcrumb">
        <li><a href="../index.html">Home</a></li>
        <li class="active">Basic UI</li>
      </ol>
      <h1 class="page-title">Tooltip &amp; Popover</h1>
      <div class="page-header-actions">
        <button type="button" class="btn btn-sm btn-icon btn-inverse btn-round" data-toggle="tooltip"
        data-original-title="Edit">
          <i class="icon wb-pencil" aria-hidden="true"></i>
        </button>
        <button type="button" class="btn btn-sm btn-icon btn-inverse btn-round" data-toggle="tooltip"
        data-original-title="Refresh">
          <i class="icon wb-refresh" aria-hidden="true"></i>
        </button>
        <button type="button" class="btn btn-sm btn-icon btn-inverse btn-round" data-toggle="tooltip"
        data-original-title="Setting">
          <i class="icon wb-settings" aria-hidden="true"></i>
        </button>
      </div>
    </div>
    <div class="page-content">
      <!-- Panel Tooltips -->
      <div class="panel">
        <div class="panel-heading">
          <h3 class="panel-title">Tooltips</h3>
        </div>

        <div class="panel-body container-fluid">
          <div class="row row-lg">
            <div class="col-lg-6">
              <!-- Example Static Tooltip -->
              <div class="example-wrap">
                <h4 class="example-title">Static Tooltip</h4>
                <p>Four options are available: top, right, bottom, and left aligned.</p>
                <div class="example example-tooltip">
                  <div class="tooltip bottom" role="tooltip">
                    <div class="tooltip-arrow"></div>
                    <div class="tooltip-inner">
                      Top Tooltip
                    </div>
                  </div>
                </div>

                <div class="example example-tooltip">
                  <div class="tooltip top" role="tooltip">
                    <div class="tooltip-arrow"></div>
                    <div class="tooltip-inner">
                      Bottom Tooltip
                    </div>
                  </div>
                </div>

                <div class="example example-tooltip">
                  <div class="tooltip right" role="tooltip">
                    <div class="tooltip-arrow"></div>
                    <div class="tooltip-inner">
                      Left Tooltip
                    </div>
                  </div>
                </div>

                <div class="example example-tooltip">
                  <div class="tooltip left" role="tooltip">
                    <div class="tooltip-arrow"></div>
                    <div class="tooltip-inner">
                      Right Tooltip
                    </div>
                  </div>
                </div>
              </div>
              <!-- End Example Static Tooltip -->
            </div>

            <div class="col-lg-6">
              <!-- Example Color -->
              <div class="example-wrap">
                <h4 class="example-title">Color</h4>
                <p>Five information situations are available: use the class <code>primary</code>,
                  <code>success</code>, <code>warning</code>, <code>info</code>,
                  <code>danger</code> .</p>
                <div class="example example-tooltip">
                  <button type="button" class="btn btn-primary tooltip-primary sr-only" title="">Primary</button>
                  <div class="tooltip top" role="tooltip">
                    <div class="tooltip-arrow"></div>
                    <div class="tooltip-inner">
                      Primary
                    </div>
                  </div>
                </div>

                <div class="example example-tooltip">
                  <button type="button" class="btn btn-success tooltip-success sr-only" title="">Success</button>
                  <div class="tooltip top" role="tooltip">
                    <div class="tooltip-arrow"></div>
                    <div class="tooltip-inner">
                      Success
                    </div>
                  </div>
                </div>

                <div class="example example-tooltip">
                  <button type="button" class="btn btn-info tooltip-info sr-only" title="">Info</button>
                  <div class="tooltip top" role="tooltip">
                    <div class="tooltip-arrow"></div>
                    <div class="tooltip-inner">
                      Info
                    </div>
                  </div>
                </div>

                <div class="example example-tooltip">
                  <button type="button" class="btn btn-warning tooltip-warning sr-only" title="">Warning</button>
                  <div class="tooltip top" role="tooltip">
                    <div class="tooltip-arrow"></div>
                    <div class="tooltip-inner">
                      Warning
                    </div>
                  </div>
                </div>

                <div class="example example-tooltip">
                  <button type="button" class="btn btn-danger tooltip-danger sr-only" title="">Danger</button>
                  <div class="tooltip top" role="tooltip">
                    <div class="tooltip-arrow"></div>
                    <div class="tooltip-inner">
                      Danger
                    </div>
                  </div>
                </div>
              </div>
              <!-- End Example Color -->
            </div>
          </div>

          <div class="row row-lg">
            <div class="col-lg-6">
              <!-- Example Triggers Click -->
              <div class="example-wrap margin-lg-0">
                <h4 class="example-title">Triggers Click</h4>
                <p>You can select the action that triggers the tooltip either by adding
                  the <code>data-trigger=&quot;click&quot;</code> attribute or
                  by setting the trigger parameter via Javascript.</p>
                <div class="example">
                  <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right"
                  data-trigger="click" data-original-title="Click to tooltip" title="">Click to tooltip</button>
                </div>
              </div>
              <!-- End Example Triggers Click -->
            </div>

            <div class="col-lg-6">
              <!-- Example Animation -->
              <div class="example-wrap">
                <h4 class="example-title">Animation</h4>
                <p>Apply two CSS style rotate and scale transition to the tooltip
                  when you click the button.</p>
                <div class="example example-buttons">
                  <button type="button" class="btn btn-primary tooltip-primary tooltip-rotate" data-toggle="tooltip"
                  data-placement="left" data-original-title="Tooltip on left" title="">Rotate</button>
                  <button type="button" class="btn btn-success tooltip-success tooltip-scale" data-toggle="tooltip"
                  data-placement="top" data-original-title="Tooltip on top" title="">Scale</button>
                </div>
              </div>
              <!-- End Example Animation -->
            </div>
          </div>
        </div>
      </div>
      <!-- End Panel Tooltips -->

      <!-- Panel Popover -->
      <div class="panel">
        <div class="panel-heading">
          <h3 class="panel-title">Popover
            <small><a class="example-plugin-link" href="https://github.com/sandywalker/webui-popover"
              target="_blank">official website</a></small>
          </h3>
        </div>

        <div class="panel-body container-fluid">
          <div class="row row-lg">
            <div class="col-sm-12">
              <!-- Example Static Popover -->
              <div class="example-wrap">
                <h4 class="example-title">Static Popover</h4>
                <p>Four options are available: top, right, bottom, and left aligned.</p>
                <div class="example example-popover">
                  <div class="popover bottom">
                    <div class="arrow"></div>
                    <h3 class="popover-title">Popover Bottom</h3>
                    <div class="popover-content">
                      <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam.</p>
                    </div>
                  </div>
                </div>

                <div class="example example-popover">
                  <div class="popover top">
                    <div class="arrow"></div>
                    <h3 class="popover-title">Popover Top</h3>
                    <div class="popover-content">
                      <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam.</p>
                    </div>
                  </div>
                </div>

                <div class="example example-popover">
                  <div class="popover right">
                    <div class="arrow"></div>
                    <h3 class="popover-title">Popover Right</h3>
                    <div class="popover-content">
                      <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam.</p>
                    </div>
                  </div>
                </div>

                <div class="example example-popover">
                  <div class="popover left">
                    <div class="arrow"></div>
                    <h3 class="popover-title">Popover Left</h3>
                    <div class="popover-content">
                      <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam.</p>
                    </div>
                  </div>
                </div>
              </div>
              <!-- End Example Static Popover -->
            </div>
          </div>

          <div class="row row-lg">
            <div class="col-sm-12">
              <!-- Example Color -->
              <div class="example-wrap">
                <h4 class="example-title">Color</h4>
                <p>Five information situations are available: use the class <code>primary</code>,
                  <code>success</code>, <code>warning</code>, <code>info</code>,
                  <code>danger</code> .</p>
                <div class="example example-popover">
                  <button type="button" class="btn btn-primary popover-primary sr-only">
                    Primary
                  </button>
                  <div class="popover top">
                    <div class="arrow"></div>
                    <h3 class="popover-title">Primary</h3>
                    <div class="popover-content">
                      <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam.</p>
                    </div>
                  </div>
                </div>

                <div class="example example-popover">
                  <button type="button" class="btn btn-success popover-success sr-only">
                    Success
                  </button>
                  <div class="popover top">
                    <div class="arrow"></div>
                    <h3 class="popover-title">Success</h3>
                    <div class="popover-content">
                      <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam.</p>
                    </div>
                  </div>
                </div>

                <div class="example example-popover">
                  <button type="button" class="btn btn-info popover-info sr-only">
                    Info
                  </button>
                  <div class="popover top">
                    <div class="arrow"></div>
                    <h3 class="popover-title">Info</h3>
                    <div class="popover-content">
                      <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam.</p>
                    </div>
                  </div>
                </div>

                <div class="example example-popover">
                  <button type="button" class="btn btn-warning popover-warning sr-only">
                    Warning
                  </button>
                  <div class="popover top">
                    <div class="arrow"></div>
                    <h3 class="popover-title">Warning</h3>
                    <div class="popover-content">
                      <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam.</p>
                    </div>
                  </div>
                </div>

                <div class="example example-popover">
                  <button type="button" class="btn btn-danger popover-danger sr-only">
                    Danger
                  </button>
                  <div class="popover top">
                    <div class="arrow"></div>
                    <h3 class="popover-title">Danger</h3>
                    <div class="popover-content">
                      <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam.</p>
                    </div>
                  </div>
                </div>
              </div>
              <!-- End Example Color -->
            </div>
          </div>

          <div class="row row-lg">
            <div class="col-lg-6">
              <!-- Example Triggers Click -->
              <div class="example-wrap margin-lg-0">
                <h4 class="example-title">Triggers Click</h4>
                <p>You can select the action that triggers the popover either by adding
                  the <code>data-trigger=&quot;focus / hover&quot;</code> attribute
                  or by setting the trigger parameter via Javascript.</p>
                <div class="example example-buttons">
                  <button class="btn btn-danger" data-content="And here's some amazing content. It's very engaging. Right?"
                  data-trigger="focus" data-toggle="popover" data-original-title="Focus to trigger"
                  tabindex="0" title="" type="button">Focus to trigger</button>
                  <button class="btn btn-danger" data-content="And here's some amazing content. It's very engaging. Right?"
                  data-trigger="hover" data-toggle="popover" data-original-title="Hover to trigger"
                  tabindex="0" title="" type="button">Hover to trigger</button>
                </div>
              </div>
              <!-- End Example Triggers Click -->
            </div>

            <div class="col-lg-6">
              <!-- Example Animation -->
              <div class="example-wrap">
                <h4 class="example-title">Animation</h4>
                <p>Apply two CSS style rotate and scale transition to the popover
                  when you click the button.</p>
                <div class="example example-buttons">
                  <button type="button" class="btn btn-primary popover-primary popover-rotate" data-toggle="popover"
                  data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
                  data-placement="left" data-original-title="Primary" title="">
                    Rotate
                  </button>
                  <button type="button" class="btn btn-success popover-success popover-scale" data-toggle="popover"
                  data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
                  data-placement="top" data-original-title="Success" title="">
                    Scale
                  </button>
                </div>
              </div>
              <!-- End Example Animation -->
            </div>
          </div>
        </div>
      </div>
      <!-- End Panel Popover -->

      <!-- Panel WebUI Popover -->
      <div class="panel">
        <div class="panel-heading">
          <h3 class="panel-title">WebUI Popover
            <small><a class="example-plugin-link" href="https://github.com/sandywalker/webui-popover"
              target="_blank">official website</a></small>
          </h3>
        </div>
        <div class="panel-body container-fluid">
          <div class="row row-lg">
            <div class="col-sm-6">
              <!-- Example Auto Detect Placement -->
              <div class="example-wrap">
                <h4 class="example-title">Auto Detect Placement</h4>
                <p>Auto detect the placement, always poped in page, can be contrained
                  by horizontal or vertical</p>
                <div class="example example-buttons">
                  <div class="row">
                    <div class="col-sm-4">
                      <a class="btn btn-primary" href="javascript:void(0)" data-plugin="webuiPopover"
                      data-title="WebUI Popover" data-content="&lt;p&gt;Sed posuere consectetur est at lobortis. Aenean eu leo quam.&lt;/p&gt;">Auto</a>
                    </div>
                    <div class="col-sm-4">
                      <a class="btn btn-primary" href="javascript:void(0)" data-plugin="webuiPopover"
                      data-title="WebUI Popover" data-content="&lt;p&gt;Sed posuere consectetur est at lobortis. Aenean eu leo quam.&lt;/p&gt;">Auto</a>
                    </div>
                    <div class="col-sm-4">
                      <a class="btn btn-primary" href="javascript:void(0)" data-plugin="webuiPopover"
                      data-title="WebUI Popover" data-content="&lt;p&gt;Sed posuere consectetur est at lobortis. Aenean eu leo quam.&lt;/p&gt;">Auto</a>
                    </div>
                  </div>
                </div>
              </div>
              <!-- End Example Auto Detect Placement -->
            </div>

            <div class="col-sm-6">
              <!-- Example Pop With Animation -->
              <div class="example-wrap">
                <h4 class="example-title">Pop With Animation</h4>
                <p>Set animation by data-attribute or code</p>
                <div class="example example-buttons">
                  <a class="btn btn-primary" href="javascript:void(0)" data-plugin="webuiPopover"
                  data-title="WebUI Popover" data-content="&lt;p&gt;Sed posuere consectetur est at lobortis. Aenean eu leo quam.&lt;/p&gt;"
                  data-animation="pop">Pop</a>
                  <a class="btn btn-primary" href="javascript:void(0)" data-plugin="webuiPopover"
                  data-title="WebUI Popover" data-content="&lt;p&gt;Sed posuere consectetur est at lobortis. Aenean eu leo quam.&lt;/p&gt;"
                  data-animation="fade">Fade</a>
                </div>
              </div>
              <!-- End Example Pop With Animation -->
            </div>

            <div class="clearfix"></div>

            <div class="col-sm-6">
              <!-- Example Delayed show/hide -->
              <div class="example-wrap margin-sm-0">
                <h4 class="example-title">Delayed show/hide</h4>
                <p>Control delay show/hide by data-attribute or code</p>
                <div class="example example-buttons">
                  <a class="btn btn-primary" href="javascript:void(0)" data-plugin="webuiPopover"
                  data-trigger="hover" data-placement="right" data-delay-show="300"
                  data-delay-hide="1000" data-title="WebUI Popover" data-content="&lt;p&gt;Sed posuere consectetur est at lobortis. Aenean eu leo quam.&lt;/p&gt;">Delay Show</a>
                  <a class="btn btn-primary" href="javascript:void(0)" data-plugin="webuiPopover"
                  data-trigger="hover" data-placement="left" data-delay-show="0"
                  data-delay-hide="1000" data-title="WebUI Popover" data-content="&lt;p&gt;Sed posuere consectetur est at lobortis. Aenean eu leo quam.&lt;/p&gt;">Delay Hide</a>
                </div>
              </div>
              <!-- End Example Delayed show/hide -->
            </div>

            <div class="col-sm-6">
              <!-- Example Delayed show/hide -->
              <div class="example-wrap">
                <h4 class="example-title">Advanced examples</h4>
                <p>Table in popover, larget content, async mode, iframe mode</p>
                <div class="example example-buttons">
                  <!-- Pop with table -->
                  <a class="btn btn-primary" id="examplePopWithTable" href="javascript:void(0)">Pop with table</a>
                  <div class="hidden" id="examplePopoverTable">
                    <table class="table">
                      <thead>
                        <tr>
                          <th>#</th>
                          <th>First Name</th>
                          <th>Last Name</th>
                          <th>Username</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>1</td>
                          <td>Mark</td>
                          <td>Otto</td>
                          <td>@mdo</td>
                        </tr>
                        <tr>
                          <td>2</td>
                          <td>Jacob</td>
                          <td>Thornton</td>
                          <td>@fat</td>
                        </tr>
                        <tr>
                          <td>3</td>
                          <td>Larry</td>
                          <td>the Bird</td>
                          <td>@twitter</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <!-- End Pop with table -->

                  <!-- Pop with List -->
                  <a class="btn btn-primary" id="examplePopWithList" href="javascript:void(0)">Pop with list</a>
                  <div class="hidden" id="examplePopoverList">
                    <ul class="list-group list-group-bordered">
                      <li class="list-group-item">Cras justo odio</li>
                      <li class="list-group-item">Dapibus ac facilisis in</li>
                      <li class="list-group-item">Morbi leo risus</li>
                      <li class="list-group-item">Porta ac consectetur ac</li>
                      <li class="list-group-item">Vestibulum at eros</li>
                    </ul>
                  </div>
                  <!-- End Pop with List -->

                  <!-- Pop Large Content -->
                  <a class="btn btn-primary" id="examplePopWithLargeContent" href="javascript:void(0)">Pop large content</a>
                  <div class="hidden" id="examplePopoverLargeContent">
                    <p>Ea ipsum qui sit commodo cillum reprehenderit voluptate minim
                      occaecat. Mollit tempor nostrud est aliqua qui. Nisi est
                      non exercitation magna qui. Pariatur aute proident est cupidatat
                      veniam officia excepteur. Tempor incididunt exercitation
                      ex Lorem culpa qui amet. Irure sint est ut aute minim labore
                      reprehenderit dolore. Proident aliquip non consequat proident.</p>
                    <p>Tempor nostrud nisi ipsum duis ipsum deserunt fugiat. Aute
                      et dolore do anim mollit proident elit veniam elit. Laboris
                      consectetur ullamco deserunt aute aliquip voluptate culpa
                      aute adipisicing. Consequat nostrud reprehenderit adipisicing
                      magna ullamco id amet. Sunt consectetur enim est cillum.
                      Ullamco deserunt commodo voluptate culpa dolore adipisicing
                      velit proident. Adipisicing qui adipisicing nisi cillum.</p>
                    <p>Excepteur qui proident aliquip eu. Nisi aliqua nisi sint minim
                      irure consequat. Officia voluptate nulla et dolor sint aute
                      qui proident et. Nostrud ut excepteur proident excepteur
                      eu dolor. Ullamco culpa laboris cillum cillum id laborum
                      sint. Ipsum veniam aute consequat sit adipisicing nulla.
                      Enim excepteur ipsum amet amet.</p>
                    <p>Do dolor id nisi occaecat excepteur nostrud occaecat deserunt
                      elit. Velit occaecat tempor consequat esse veniam nulla exercitation.
                      Quis commodo cillum do laboris ea ut tempor fugiat. Cillum
                      fugiat commodo eu laborum cillum reprehenderit magna. Id
                      in fugiat quis sunt laboris cillum. Dolore incididunt qui
                      laboris quis aliqua ad enim consequat nulla. Exercitation
                      anim id nulla sit culpa deserunt.</p>
                  </div>
                  <!-- End Pop Large Content -->
                  <a class="btn btn-primary" data-url="http://getbootstrap.com" data-width="500"
                  data-height="350" data-padding="false" data-closeable="true"
                  data-title="Iframe example" data-type="iframe" href="javascript:void(0)"
                  data-plugin="webuiPopover">Pop iframe</a>
                </div>
              </div>
              <!-- End Example Delayed show/hide -->
            </div>
          </div>
        </div>
      </div>
      <!-- End Panel WebUI Popover -->

      <!-- Panel Toolbar.js -->
      <div class="panel">
        <div class="panel-heading">
          <h3 class="panel-title">Toolbar.js
            <small><a class="example-plugin-link" href="http://paulkinzett.github.com/toolbarTooltips"
              target="_blank">official website</a></small>
          </h3>
        </div>
        <div class="panel-body container-fluid">
          <div class="row row-lg">
            <div class="col-sm-6">
              <!-- Example Default -->
              <div class="example-wrap">
                <h4 class="example-title">Default</h4>
                <div class="example example-buttons">
                  <div class="toolbar-icons hidden" id="user-options">
                    <a href="javascript:void(0)"><i class="icon wb-user" aria-hidden="true"></i></a>
                    <a href="javascript:void(0)"><i class="icon wb-star" aria-hidden="true"></i></a>
                    <a href="javascript:void(0)"><i class="icon wb-edit" aria-hidden="true"></i></a>
                    <a href="javascript:void(0)"><i class="icon wb-trash" aria-hidden="true"></i></a>
                    <a href="javascript:void(0)"><i class="icon wb-bookmark" aria-hidden="true"></i></a>
                  </div>
                  <button type="button" class="btn btn-icon btn-dark btn-pure" data-plugin="toolbar"
                  data-toolbar="#user-options">
                    <i class="icon wb-settings" aria-hidden="true"></i>
                  </button>

                  <button type="button" class="btn btn-icon btn-default btn-outline" data-plugin="toolbar"
                  data-toolbar="#user-options">
                    <i class="icon wb-settings" aria-hidden="true"></i>
                  </button>

                  <button type="button" class="btn btn-icon btn-default btn-outline btn-round" data-plugin="toolbar"
                  data-toolbar="#user-options">
                    <i class="icon wb-settings" aria-hidden="true"></i>
                  </button>
                </div>
              </div>
              <!-- End Example Default -->
            </div>

            <div class="col-sm-6">
              <!-- Example Colorful -->
              <div class="example-wrap">
                <h4 class="example-title">Colorful</h4>
                <div class="example example-buttons">
                  <button type="button" class="btn btn-icon btn-primary btn-outline btn-round" data-plugin="toolbar"
                  data-toolbar="#user-options" data-toolbar-style="primary">
                    <i class="icon wb-settings" aria-hidden="true"></i>
                  </button>

                  <button type="button" class="btn btn-icon btn-danger btn-outline btn-round" data-plugin="toolbar"
                  data-toolbar="#user-options" data-toolbar-style="danger">
                    <i class="icon wb-settings" aria-hidden="true"></i>
                  </button>

                  <button type="button" class="btn btn-icon btn-warning btn-outline btn-round" data-plugin="toolbar"
                  data-toolbar="#user-options" data-toolbar-style="warning">
                    <i class="icon wb-settings" aria-hidden="true"></i>
                  </button>

                  <button type="button" class="btn btn-icon btn-info btn-outline btn-round" data-plugin="toolbar"
                  data-toolbar="#user-options" data-toolbar-style="info">
                    <i class="icon wb-settings" aria-hidden="true"></i>
                  </button>

                  <button type="button" class="btn btn-icon btn-success btn-outline btn-round" data-plugin="toolbar"
                  data-toolbar="#user-options" data-toolbar-style="success">
                    <i class="icon wb-settings" aria-hidden="true"></i>
                  </button>

                  <button type="button" class="btn btn-icon btn-dark btn-outline btn-round" data-plugin="toolbar"
                  data-toolbar="#user-options" data-toolbar-style="dark">
                    <i class="icon wb-settings" aria-hidden="true"></i>
                  </button>
                </div>
              </div>
              <!-- End Example Colorful -->
            </div>

            <div class="clearfix visible-sm-block visible-md-block visible-lg-block"></div>

            <div class="col-sm-6">
              <!-- Example Customizable -->
              <div class="example-wrap margin-sm-0">
                <h4 class="example-title">Customizable</h4>
                <div class="example example-buttons">
                  <div class="toolbar-icons hidden" id="set-01-options">
                    <a href="javascript:void(0)"><i class="icon wb-print" aria-hidden="true"></i></a>
                    <a href="javascript:void(0)"><i class="icon wb-download" aria-hidden="true"></i></a>
                    <a href="javascript:void(0)"><i class="icon wb-trash" aria-hidden="true"></i></a>
                  </div>

                  <div class="toolbar-icons hidden" id="set-02-options">
                    <a href="javascript:void(0)"><i class="icon bd-google-plus" aria-hidden="true"></i></a>
                    <a href="javascript:void(0)"><i class="icon bd-facebook" aria-hidden="true"></i></a>
                    <a href="javascript:void(0)"><i class="icon bd-twitter" aria-hidden="true"></i></a>
                  </div>

                  <div class="toolbar-icons hidden" id="set-03-options">
                    <a href="javascript:void(0)"><i class="icon wb-pause" aria-hidden="true"></i></a>
                    <a href="javascript:void(0)"><i class="icon wb-play" aria-hidden="true"></i></a>
                    <a href="javascript:void(0)"><i class="icon wb-stop" aria-hidden="true"></i></a>
                  </div>

                  <div class="toolbar-icons hidden" id="set-04-options">
                    <a href="javascript:void(0)"><i class="icon wb-star" aria-hidden="true"></i></a>
                    <a href="javascript:void(0)"><i class="icon wb-star-half" aria-hidden="true"></i></a>
                    <a href="javascript:void(0)"><i class="icon wb-star-outline" aria-hidden="true"></i></a>
                  </div>

                  <div class="toolbar-icons hidden" id="set-05-options">
                    <a href="javascript:void(0)"><i class="icon wb-reply" aria-hidden="true"></i></a>
                    <a href="javascript:void(0)"><i class="icon wb-share" aria-hidden="true"></i></a>
                    <a href="javascript:void(0)"><i class="icon wb-bookmark" aria-hidden="true"></i></a>
                    <a href="javascript:void(0)"><i class="icon wb-flag" aria-hidden="true"></i></a>
                  </div>

                  <div class="toolbar-icons hidden" id="set-06-options">
                    <a href="javascript:void(0)"><i class="icon wb-align-justify" aria-hidden="true"></i></a>
                    <a href="javascript:void(0)"><i class="icon wb-align-left" aria-hidden="true"></i></a>
                    <a href="javascript:void(0)"><i class="icon wb-align-center" aria-hidden="true"></i></a>
                    <a href="javascript:void(0)"><i class="icon wb-align-right" aria-hidden="true"></i></a>
                  </div>

                  <button class="btn btn-primary btn-icon btn-outline btn-round" data-plugin="toolbar"
                  data-toolbar="#set-01-options" data-toolbar-event="click" data-toolbar-style="primary"
                  type="button"><i class="icon wb-settings" aria-hidden="true"></i></button>

                  <button class="btn btn-danger btn-icon btn-outline btn-round" data-plugin="toolbar"
                  data-toolbar="#set-02-options" data-toolbar-style="danger" type="button"><i class="icon wb-share" aria-hidden="true"></i></button>

                  <button class="btn btn-warning btn-icon btn-outline btn-round" data-plugin="toolbar"
                  data-toolbar="#set-03-options" data-toolbar-style="warning" data-toolbar-position="left"
                  type="button"><i class="icon wb-play" aria-hidden="true"></i></button>

                  <button class="btn btn-info btn-icon btn-outline btn-round" data-plugin="toolbar"
                  data-toolbar="#set-04-options" data-toolbar-style="info" data-toolbar-position="right"
                  type="button"><i class="icon wb-star" aria-hidden="true"></i></button>

                  <button class="btn btn-success btn-icon btn-outline btn-round" data-plugin="toolbar"
                  data-toolbar="#set-05-options" data-toolbar-style="success" data-toolbar-position="top"
                  type="button"><i class="icon wb-settings" aria-hidden="true"></i></button>

                  <button class="btn btn-default btn-icon btn-outline btn-round" data-plugin="toolbar"
                  data-toolbar="#set-06-options" data-toolbar-style="default" data-toolbar-position="bottom"
                  type="button"><i class="icon wb-align-justify" aria-hidden="true"></i></button>
                </div>
              </div>
              <!-- End Example Customizable -->
            </div>

            <div class="col-sm-6">
              <!-- Example Animations -->
              <div class="example-wrap">
                <h4 class="example-title">Animations</h4>
                <div class="example example-buttons">
                  <button class="btn btn-primary btn-icon btn-outline btn-round" data-plugin="toolbar"
                  data-toolbar="#set-05-options" data-toolbar-animation="standard"
                  data-toolbar-event="click" data-toolbar-style="primary" type="button"><i class="icon wb-settings" aria-hidden="true"></i></button>

                  <button class="btn btn-danger btn-icon btn-outline btn-round" data-plugin="toolbar"
                  data-toolbar="#set-05-options" data-toolbar-animation="flip"
                  data-toolbar-style="danger" type="button"><i class="icon wb-settings" aria-hidden="true"></i></button>

                  <button class="btn btn-warning btn-icon btn-outline btn-round" data-plugin="toolbar"
                  data-toolbar="#set-05-options" data-toolbar-animation="grow"
                  data-toolbar-style="warning" type="button"><i class="icon wb-settings" aria-hidden="true"></i></button>

                  <button class="btn btn-info btn-icon btn-outline btn-round" data-plugin="toolbar"
                  data-toolbar="#set-05-options" data-toolbar-animation="flyin"
                  data-toolbar-style="info" type="button"><i class="icon wb-settings" aria-hidden="true"></i></button>

                  <button class="btn btn-success btn-icon btn-outline btn-round" data-plugin="toolbar"
                  data-toolbar="#set-05-options" data-toolbar-animation="bounce"
                  data-toolbar-style="success" type="button"><i class="icon wb-settings" aria-hidden="true"></i></button>

                  <button class="btn btn-dark btn-icon btn-outline btn-round" data-plugin="toolbar"
                  data-toolbar="#set-05-options" data-toolbar-animation="grow"
                  data-toolbar-style="dark" type="button"><i class="icon wb-settings" aria-hidden="true"></i></button>
                </div>
              </div>
              <!-- End Example Animations -->
            </div>
          </div>
        </div>
      </div>
      <!-- End Panel Toolbar.js -->
    </div>
  </div>
  <!-- End Page -->


  <!-- Footer -->
  <footer class="site-footer">
    <div class="site-footer-legal">© 2016 <a href="http://themeforest.net/item/remark-responsive-bootstrap-admin-template/11989202">Remark</a></div>
    <div class="site-footer-right">
      Crafted with <i class="red-600 wb wb-heart"></i> by <a href="http://themeforest.net/user/amazingSurge">amazingSurge</a>
    </div>
  </footer>
  <!-- Core  -->
  <script src="../../global/vendor/jquery/jquery.min.js"></script>
  <script src="../../global/vendor/bootstrap/bootstrap.min.js"></script>
  <script src="../../global/vendor/animsition/animsition.min.js"></script>
  <script src="../../global/vendor/asscroll/jquery-asScroll.min.js"></script>
  <script src="../../global/vendor/mousewheel/jquery.mousewheel.min.js"></script>
  <script src="../../global/vendor/asscrollable/jquery.asScrollable.all.min.js"></script>
  <script src="../../global/vendor/ashoverscroll/jquery-asHoverScroll.min.js"></script>

  <!-- Plugins -->
  <script src="../../global/vendor/switchery/switchery.min.js"></script>
  <script src="../../global/vendor/intro-js/intro.min.js"></script>
  <script src="../../global/vendor/screenfull/screenfull.min.js"></script>
  <script src="../../global/vendor/slidepanel/jquery-slidePanel.min.js"></script>

  <!-- Plugins For This Page -->
  <script src="../../global/vendor/webui-popover/jquery.webui-popover.min.js"></script>
  <script src="../../global/vendor/toolbar/jquery.toolbar.min.js"></script>

  <!-- Scripts -->
  <script src="../../global/js/core.min.js"></script>
  <script src="../assets/js/site.min.js"></script>

  <script src="../assets/js/sections/menu.min.js"></script>
  <script src="../assets/js/sections/menubar.min.js"></script>
  <script src="../assets/js/sections/gridmenu.min.js"></script>
  <script src="../assets/js/sections/sidebar.min.js"></script>

  <script src="../../global/js/configs/config-colors.min.js"></script>
  <script src="../assets/js/configs/config-tour.min.js"></script>

  <script src="../../global/js/components/asscrollable.min.js"></script>
  <script src="../../global/js/components/animsition.min.js"></script>
  <script src="../../global/js/components/slidepanel.min.js"></script>
  <script src="../../global/js/components/switchery.min.js"></script>

  <script src="../../global/js/components/webui-popover.min.js"></script>
  <script src="../../global/js/components/toolbar.min.js"></script>


  <script src="../assets/examples/js/uikit/tooltip-popover.min.js"></script>



</body>

</html>